<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1" />
		<meta charset="UTF-8">
		<title>预定会场</title>
		<script type="text/javascript" src="__TMPL__/public/assets/js/flexible.js"></script>
		<link rel="stylesheet" href="__TMPL__/public/assets/css/all_page.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/public.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/mobiscroll.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/mobiscroll_002.css" />
		<link rel="stylesheet" href="__TMPL__/public/assets/css/mobiscroll_003.css" />
		<style>
			
		</style>
	</head>

	<body>

		<div class="predetermine">
			<!--头部-->
			<div class="pTop">
				<label>时间：</label>
				<div class="input">
					<input value="{:date('Y-m-d',$info['start_time'])}" class="" readonly="readonly" name="appDate" id="appDate" type="text">
					<php>$arr = array("日","一","二","三","四","五","六");</php>
					<p id="appDateText">{:date("m-d",$info['start_time'])}<span>周{:$arr[date('w',$info['start_time'])]}</span></p>
				</div> <span>-</span>
				<div class="input">
					<input value="" class="" readonly="readonly" name="appDate" id="amOrpm" type="text">
					<p id="amOrpmText">
						<if condition="date('H',$info['start_time']) lt 12">
							上午
							<elseif condition="date('H',$info['start_time']) egt 12"/>
							下午
						</if>
					</p>
				</div>
				<ul id="sex-list" style="display: none">
					<li>上午</li>
					<li>下午</li>
				</ul>
			</div>
			
			<!--会场-->
			<div class="mPlace">
				<div class="mTop">
					<p>{$info['list_title']}</p>
					<a href="{:url('index')}"><p class="change">切换场所</p></a>
				</div>
				<div class="mSubTil">
					<div>{$info['intro']}</div>	
				</div>
			</div>
			
			<!--填写信息-->
			<div class="pInfo">
				<if condition="$info['is_type'] eq 1">
					<div class="type div_float" id="sType">
					<else/>
					<div class="type div_float" id="sType" style="display: none;">
				</if>
					<div>
						<label>彩排</label>
						<input type="radio" name="sType" value="1" <if condition="$info['type'] eq 1">checked</if>  />
					</div>
					<div>
						<label>会议</label>
						<input type="radio" name="sType" value="2" <if condition="$info['type'] eq 2">checked</if>  />
					</div>
					<div>
						<label>演出</label>
						<input type="radio" name="sType" value="3" <if condition="$info['type'] eq 3">checked</if>   />
					</div>
					<div>
						<label>布场</label>
						<input type="radio" name="sType" value="4" <if condition="$info['type'] eq 4">checked</if>  />
					</div>
				</div>
				
				<div class="Cn">
					<div class="l">
					 	<span></span><label>会议主题：</label>
					 	<input type="text" name="theme" value="{$info['theme']}" />
					</div>
					<div class="l">
					 	<span></span><label>会议人数：</label>
					 	<input type="text" name="num" value="{$info['num']}" />
					</div>
					<div class="time div_float">
						<div class="s"><span class="sj"></span><label>会议时间：</label></div>
						<div class="timeText"><span id="sTimeText">{:date('H:00',$info['start_time'])}</span><input type="text" name="start" id="sTime" value="{:date('H:00',$info['start_time'])}" /></div><span>至</span>
						<div class="timeText"><span id="eTimeText">{:date('H:00',$info['end_time'])}</span><input type="text" name="end" id="eTime" value="{:date('H:00',$info['end_time'])}" /></div>
					</div>
					<div class="time div_float">
						<div class="m">
							<span class="bm"></span><label>预定部门：</label>
							<input type="text" readonly="readonly"  value="{$user['name']}" />
						</div>
						<div class="m lx">
							<span class="lxr"></span><label>联系人：</label>
							<input type="text" readonly="readonly"   value="{$user['user_login']}"/>
						</div>
					</div>
					<div class="l">
					 	<span class="lxdh"></span><label>联系电话：</label>
					 	<input type="text" readonly="readonly" value="{$user['mobile']}"/>
					</div>
					<div class="l remark">
					 	<span class="bz"></span><label>备注：</label>
					 	<textarea id="remark" placeholder="超时要求：******    其他要求: ******">{$info['remark']}</textarea>
					</div>
				</div>
				<div class="btm div_float">
					<div>
						<label>是否纯净水</label>
						<input name="is_water" type="checkbox" <if condition="$info['is_water'] eq 1">checked</if> />
					</div>
					<if condition="$info['layout'] eq 1">
					<div>
						<label>主席台布置</label>
						<input name="is_layout" type="checkbox" <if condition="$info['is_layout'] eq 1">checked</if> />
					</div>
					</if>
				</div>
				<div class="layer">
					<input type="checkbox" id="zhidu"   />
					<label class="lookRule">同意会议室使用管理制度</label>
					<div class="pLayer divHide">
						<div class="sub">
							<span class="close">×</span>
							<div>{:htmlspecialchars_decode($meeting_article['meeting_article'])}</div>
						</div>
					</div>
				</div>
				<div class="yuding">
					<p onclick="yuding()">立即预定</p>
					<a href="{:url('book',array('user_id'=>1))}"><p>我的预定</p></a>
				</div>
			</div>
			
			<!--公共底部-->
			<include file='public@footer'/>
			
		</div>
		<input type="hidden" name="meet_id" value="{$info['meet_id']}">
		<input type="hidden" name="id" value="{:input('id')}">
	</body>
	<script type="text/javascript" src="__TMPL__/public/assets/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/mobiscroll.custom-2.5.2.min.js"></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/mobiscroll_003.js" ></script>
	<script type="text/javascript" src="__TMPL__/public/assets/js/js.js" ></script>
	<script>
		var time = "{:date('Y-m-d',$info['start_time'])}";
		var yuding = function(){
			var water,type,layout;
			if( $("#zhidu").attr('checked') !== "checked" )  {
			    alert("您需要同意我们的服务协议");
			    return false;
			}
			if( $("input[name='is_water']").attr('checked') !== "checked" )  {
			    water = 0; 
			}else{
				water = 1; 
			}
			if( $("input[name='is_layout']").attr('checked') !== "checked" )  {
			    layout = 0; 
			}else{
				layout = 1; 
			}
			
			if ( $("#sType").attr('display') != "none"  ) {
				if( $("input[name='sType']").is(':checked') != true )  {
			    	alert("请选择会议类型！");return false;
				}else{
					type = $('input[name="sType"]:checked').val();
				}
				
			}else{
				type = 0;
			}

			$.ajax({ 
				url: "{:url('editPost')}", 
				type:"POST",
				data: {
					theme:$("input[name='theme']").val(),
					num:$("input[name='num']").val(),
					start:time+" "+$("input[name='start']").val(),
					end:time+" "+$("input[name='end']").val(),
					remark:$("#remark").val(),
					type:type,
					is_layout:layout,
					is_water:water,
					id:$("input[name='id']").val(),
				},
				dataType:"json",
				success: function(data){
		    		if (data.status == 0) {
		    			alert(data.msg);
		    		}else{
		    			alert(data.msg);
		    			location.href=data.url;
		    		}
		   		} ,
		   		error:function(){
		   			console.log("失败");
		   		}
		   	});
		}

		$(function() {

			var show = "{:date('Y-m-d',$info['start_time'])}";
			var timetype = $('#amOrpmText').html();

			$("#sTime").mobiscroll().time({ 
		        theme: "android-ics",
		        display: 'bottom',
		        lang: "zh",
		        stepMinute:60,
		        multiSelect: true,
		        onSelect: function(valueText) {
					console.log(valueText)
					$('#sTimeText').text(valueText)
				}
		    });

		    $("#eTime").mobiscroll().time({ 
		        theme: "android-ics",
		        display: 'bottom',
		        lang: "zh",
		        stepMinute:60,
		        startHour:9,
		        endHour:12,
		        onSelect: function(valueText) {
					console.log(valueText)
					$('#eTimeText').text(valueText)
				}
		    });
			console.log(timetype);
			$("#appDate").mobiscroll().date({
				theme: "android-ics",
				lang: "zh",
				display: 'bottom',
				selectType: 'week',
				dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
				
				//wheels:[], //设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
				//onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
				headerText: function(valueText) { //自定义弹出框头部格式
					array = valueText.split('-');
					return array[0] + "年" + array[1] + "月" + array[2] + "日";
				},
				onSelect: function(valueText, inst) {
					time = valueText;
					var showDay = valueText.split('-');
					show =valueText;
					if (Date.parse(nowtime) > Date.parse(valueText)) {
						alert("不能小于当前实际时间。");
						return false;
					}
					$.ajax({ 
							url: "{:url('addCheck')}", 
							type:"POST",
							//async: false,
							data: {
								id:{:input('id')},
								sdate:show,
								timetype:timetype,
								meet_id:$("input[name='meet_id']").val(),
							},
							dataType:"json",
							success: function(data){
								if(data.status == 0){
									alert(data.msg);
									return false;
								}else{
									var mydate=new Date(valueText);
									var myddy=mydate.getDay();//获取存储当前日期
									var weekday=["周日","周一","周二","周三","周四","周五","周六"];
									
									$("#appDateText").html(showDay[1]+'-'+showDay[2]+'<span>'+weekday[myddy]+'</span>');
									return true;
								}
					   		} ,
					   		error:function(){
					   			console.log("失败");
					   		}
					   	});
				}
			});

			$("#amOrpm").click(function() {
				var that = this;
				$("#sex-list").mobiscroll().treelist({
					theme: "android-ics",
					lang: "zh",
					display: 'bottom',
					headerText: '请您选择',
					onSelect: function(valueText) {
						var m = $(this).find("li").eq(valueText).html();
						timetype = m;
						if (m == '上午') {
							$('#sTime').mobiscroll('option', {
							    minDate: new Date(new Date().setHours(9, 0, 0, 0)),
						       	maxDate: new Date(new Date().setHours(12, 0, 0, 0)),
						       	stepMinute:60,

							});
							$('#eTime').mobiscroll('option', {
							    minDate: new Date(new Date().setHours(9, 0, 0, 0)),
						       	maxDate: new Date(new Date().setHours(12, 0, 0, 0)),
						       	stepMinute:60,
							});
							$('#sTimeText').html("09:00");
							$('#eTimeText').html("10:00");
							$('#sTime').val();
							$('#eTime').val();
						}else{
							$('#sTime').mobiscroll('option', {    	
							    minDate: new Date(new Date().setHours(14, 0, 0, 0)),
						       	maxDate: new Date(new Date().setHours(18, 0, 0, 0)),
						       	stepMinute:60,
							});
							$('#eTime').mobiscroll('option', {
							    minDate: new Date(new Date().setHours(14, 0, 0, 0)),
						       	maxDate: new Date(new Date().setHours(18, 0, 0, 0)),
						       	stepMinute:60,
							});
							$('#sTimeText').html("14:00");
							$('#eTimeText').html("15:00");
							$('#sTime').val();
							$('#eTime').val();
						}

						$.ajax({ 
							url: "{:url('addCheck')}", 
							type:"POST",
							//async: false,
							data: {
								id:{:input('id')},
								sdate:show,
								timetype:timetype,
								meet_id:$("input[name='meet_id']").val(),
							},

							dataType:"json",
							success: function(data){
								if(data.status == 0){
									alert(data.msg);
									return false;
								}else{
									$(that).val(m);
									$('#amOrpmText').html(m)
									return true;
								}
					   		} ,
					   		error:function(){
					   			console.log("失败");
					   		}
					   	});
						$(that).val(m);
						$('#amOrpmText').html(m)
					}
				});
				$("input[id^=sex-list]").focus();
			});

			<if condition="date('H',$info['start_time']) lt 12">
			$('#sTime').mobiscroll('option', {
			    minDate: new Date(new Date().setHours(9, 0, 0, 0)),
		       	maxDate: new Date(new Date().setHours(12, 0, 0, 0)),
		       	stepMinute:60,
			});
			$('#eTime').mobiscroll('option', {
			    minDate: new Date(new Date().setHours(9, 0, 0, 0)),
		       	maxDate: new Date(new Date().setHours(12, 0, 0, 0)),
		       	stepMinute:60,
			});
		    <else/>
		    $('#sTime').mobiscroll('option', {    	
			    minDate: new Date(new Date().setHours(14, 0, 0, 0)),
		       	maxDate: new Date(new Date().setHours(18, 0, 0, 0)),
		       	stepMinute:60,
			});
			$('#eTime').mobiscroll('option', {
			    minDate: new Date(new Date().setHours(14, 0, 0, 0)),
		       	maxDate: new Date(new Date().setHours(18, 0, 0, 0)),
		       	stepMinute:60,
			});
			</if>
			
		    
		    $('.lookRule').on('click',function(){
		    	$('.pLayer').removeClass('divHide');
		    });
		    $('.pLayer .close').on('click',function(){
		    	$('.pLayer').addClass('divHide');
		    })
		    
		});
	</script>

</html>